import 'package:flutter/material.dart';
import 'package:my_flu01/page/pub/CommonBottomBar.dart';

/**
 * @author hanson
 * @version[创立日期，2023/9/9 14:41]
 * @function[功用简介 ]
 **/
//https://blog.csdn.net/weixin_46136019/article/details/129486982
class gridViewPage extends StatefulWidget {
  const gridViewPage({Key? key}) : super(key: key);

  @override
  _gridViewPage createState() => _gridViewPage();
}

/*class _gridViewPage extends State<gridViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("gridViewPage"),
        ),
        body: Center(
          child: Builder(
              builder: (BuildContext context) {
                return Center(
                    child: GridView.builder(
                      itemCount: listData.length, //循环数量
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisSpacing: 2,
                        //控制表格左右的距离
                        mainAxisSpacing: 2,
                        //控制表格上下的距离
                        crossAxisCount: 2,
                        //列数
                      ),
                      itemBuilder: this._getListdate,

                    ),

                );
              }),
        )
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }*/

class _gridViewPage extends State<gridViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("gridViewPage"),
      ),
      body: Column(children: <Widget>[
         Expanded(child: Builder(builder: (BuildContext context) {
          return Center(
              child: GridView.builder(
            itemCount: listData.length, //循环数量
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 2,
              //控制表格左右的距离
              mainAxisSpacing: 2,
              //控制表格上下的距离
              crossAxisCount: 2,
              //列数
            ),
            itemBuilder: this._getListdate,
          ));
        })),
        Padding(
          padding: EdgeInsets.only(top: 100), //
          child: Column(
            children: _getListViewDate(),
          ),
        )
      ]),
      bottomNavigationBar: CommonBottomBar(), // 使用公用的底部框
    );
    // This trailing comma makes auto-formatting nicer for build methods.
  }

  Widget _getListdate(context, index) {
    return Container(
      child: Column(
        children: [
          Image.network(
            listData[index]['imageUrl'],
          ),
          SizedBox(
            height: 10,
          ), //设置text和image之间的距离
          Text(
            listData[index]['title'],
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.lightGreen, width: 1) //设置四个边框
          ), //listview会平铺数据，Column会垂直排列
    );
  }

  List<Widget> _getListViewDate() {
    var tempList = listData.map((e) {
      return ListTile(
        leading: Image.network((e)["imageUrl"]),
        title: Text(e["title"]),
        subtitle: Text(e["author"]),
        trailing: Icon(Icons.phone),
      );
    }

        // (e) => ListTile(
        //   title: Text(e["title"]),
        // ),
        );
    return tempList.toList();
  }
}

List listData = [
  {
    "title": "Candy Shop",
    "author": "Mohamed Chahin",
    "imageUrl": "https://www.itying.com/images/flutter/1.png",
  },
  {
    "title": "Candy Shop",
    "author": "Mohamed Chahin",
    "imageUrl": "https://www.itying.com/images/flutter/2.png",
  },
  {
    "title": "Candy Shop",
    "author": "Mohamed Chahin",
    "imageUrl": "https://www.itying.com/images/flutter/3.png",
  },
  {
    "title": "Candy Shop",
    "author": "Mohamed Chahin",
    "imageUrl": "https://www.itying.com/images/flutter/4.png",
  }
  /*,{
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/5.png",
  }*/
];
